<template>
  <div class="keyindicator-content">
    <Navbar title="重点指标" />
    <div class="bg">
      <div class="home-tabs">
        <div class="box">
          <div
            v-for="(item, index) in industryListNoneNull"
            :key="item.division"
            class="tabs"
            :class="{ 'tab-checked': item.isChecked }"
            @click="onIndustryChange(index)"
          >
            <div class="bg" :class="{ 'bg-img': item.isChecked }">
              <div class="img">
                <img :src="item.isChecked ? item.iconChecked : item.icon" />
              </div>
              <div>{{ item?.division }}</div>
            </div>
          </div>
        </div>
      </div>
      <div ref="refList" class="content-list" >
        <div
          class="abnormalInfo"
          ref="abnormalInfoRef"
          :draggable="true"
          @click="show ? handleViewAll('abnormalInfo') : abnormalInfoShow()"
          @touchstart="mousedown"
          @touchmove="move"
          @touchend="end"
        ></div>
        <div
          class="videoMeet"
          ref="videoMeetRef"
          :draggable="true"
          @click="meetShow ? handleViewAll('videoMeet') : videoMeetShow()"
          @touchstart="mousedown"
          @touchmove="meetMove"
          @touchend="meetEnd"
        ></div>
        <QuotaList :cgjybzIndustry="cgjybzIndustry" />
      </div>

    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, toRefs, watch, onActivated, getCurrentInstance, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import menus from './components/menu.js'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store'

import Navbar from '@/components/Navbar/index.vue'
import QuotaList from './components/QuotaList.vue'

import HomeServe from '@/api/home'
import QuotaServe from '@/api/quota'
import { getVideoUrl } from '@/utils/index'

defineOptions({
  name: 'Home'
})
// 取出用户信息
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

const route = useRoute()
const abnormalInfoRef = ref(null)
const videoMeetRef = ref(null)
const show = ref(false)
const meetShow = ref(false)
const isMove = ref(false)
const isMeetMove = ref(false)
const abnormalInfoShow = (e: any) => {
  show.value = !show.value
  abnormalInfoRef._value.style.right = show.value ? '15px' : '-40px'
  // if (show.value) {
  setTimeout(() => {
    show.value = false
    abnormalInfoRef._value.style.right = '-40px'
  }, 1000)
  // }
}
const videoMeetShow = (e: any) => {
  meetShow.value = !meetShow.value
  videoMeetRef._value.style.right = meetShow.value ? '15px' : '-40px'
  setTimeout(() => {
    meetShow.value = false
    videoMeetRef._value.style.right = '-40px'
  }, 1000)
}
const move = (ev: any) => {
  isMove.value = true
  abnormalInfoRef._value.style.right = '15px'
  abnormalInfoRef._value.style.left =
    ev.touches[0].pageX - abnormalInfoRef._value.clientWidth / 2 + 'px'
  abnormalInfoRef._value.style.top =
    ev.touches[0].pageY - abnormalInfoRef._value.clientHeight / 2 + 'px'
}
const end = (e: any) => {
  if (isMove.value) {
    console.log('end')
    abnormalInfoRef._value.style.left = ''
    abnormalInfoRef._value.style.right = '15px'
    abnormalInfoShow()
  }
  isMove.value = false
}
const meetMove = (ev: any) => {
  isMeetMove.value = true
  videoMeetRef._value.style.right = '15px'
  videoMeetRef._value.style.left =
    ev.touches[0].pageX - videoMeetRef._value.clientWidth / 2 + 'px'
  videoMeetRef._value.style.top =
    ev.touches[0].pageY - videoMeetRef._value.clientHeight / 2 + 'px'
}
const meetEnd = (e: any) => {
  if (isMeetMove.value) {
    console.log('end')
    videoMeetRef._value.style.left = ''
    videoMeetRef._value.style.right = '15px'
    videoMeetShow()
  }
  isMeetMove.value = false
}

const router = useRouter()
const handleViewAll = (type: string) => {
  if(type == 'abnormalInfo'){
    router.push('/anomalyIndex')
  }else{
    const url = getVideoUrl();
    window.open(url, '_blank')
  }
}

// state
interface IState {
  curDivision: IDivisionItem | null
}

const state = reactive<IState>({
  curDivision: null
})

const cgjybzIndustry = ref(null)

let userMenu = userInfo.value.domains || []
let menu = menus.filter(item=>userMenu.some(ele=>ele === item.division));
const industryListNoneNull = ref(menu)

const initQuotaList = () => {
  let domain = industryListNoneNull.value[tabIndex.value].name
  QuotaServe.getQuotaList({ domain: domain }).then(res=>{
    let quotaData = res.data
    //经济调节-生产总值该领域下新增国家重点管控资源分类
    //暂时将国家重点管控资源去掉
    if(domain == 'JJTJ'){

      QuotaServe.getPricePrediction({}).then(resp=>{
        let priceData = resp.data
        priceData.forEach((ele,index)=>{
          ele.industryName = "国家重点管控资源"
          ele.quotaName = ele.name
          ele.quotaId = ele.id
          ele.predictEntity = {
            prediction: ele.prediction,
            real: ele.real,
          }
        })
        quotaData.forEach(ele=>{
          if(ele.division == '生产总值'){
            ele.list = [...ele.list, ...priceData]
          }
        })
        cgjybzIndustry.value = quotaData
      }).catch(()=>{
        cgjybzIndustry.value = quotaData
      })
      
    }else{
      cgjybzIndustry.value = quotaData
    }
    backTop()
  })
}

// industry tab switch
const tabIndex = ref(0);
const onIndustryChange = (idx: number) => {
  tabIndex.value = idx
  industryListNoneNull.value.map((m, i) => {
    if (i == idx) {
      m.isChecked = true
    } else {
      m.isChecked = false
    }
  })
  initQuotaList()
}

//回到顶部
const refList = ref<HTMLElement | null>(null)
const backTop = () => {
  nextTick(()=>{
    let top = refList.value.scrollTop;

    // 实现滚动效果
    const timeTop = setInterval(() => {
      refList.value.scrollTop = top -= 50;
      if (top <= 0) {
        clearInterval(timeTop);
      }
    }, 10);
  })
}

let ids = 0
if(route.query.type){
  let index =   industryListNoneNull.value.findIndex(i=>{
    return i.division == route.query.type
  })
  ids = index>-1?index:0
}
onIndustryChange(ids)

const { curDivision } = toRefs(state)
</script>

<script lang="ts">
export interface IDivisionItem {
  division: string
}

export interface IAbnormalInfo {
  total: number
  anomalyIndex: number
}
</script>

<style lang="less" scoped>
.keyindicator-content {
  >.bg{
    height: 100vh;
    box-sizing: border-box;
    overflow: auto;
    display: flex;
    flex-direction: column;
    background:linear-gradient(180deg, #3A75C5 0%, #3A75C500 220px, #ffffff00 100%);
    padding-bottom: 70px;
    margin-top: -1px;
  }

  .home-tabs {
    width: 100%;
    overflow: auto;
    position: fixed;
    top: 55px;
    .box::-webkit-scrollbar {
      display: none;
    }
    .box {
      display: flex;
      overflow: auto;
      margin-left: 12px;
      margin-right: 10px;
      height: 100%;
      position: relative;
      .tab-checked {
        min-width: 77px !important;
        height: 76px !important;
        border: none !important;
        color: #fff;
        background: url('/src/assets/keyIndicator/tab-checked.png') no-repeat !important;
        background-size: 100% 100% !important;
      }
      .tabs {
        min-width: 75px;
        height: 65px;
        margin-right: 8px;
        background: rgba(255, 255, 255, 0.6);
        border: 2px solid #fff;
        border-radius: 10px;
        font-family: 'Source', Han, Sans, CN;
        font-size: 12px;
        .bg-img {
          min-width: 72px;
          height: 70px !important;
          padding: 2px;
          box-sizing: border-box;
          box-shadow: 0 2px 5px rgba(1, 101, 251, 0.5);
        }
        .bg,
        .bg-img {
          height: 65px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-radius: 10px;

          .img {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              width: 30px;
              height: 30px;
            }
          }
        }
      }
    }

    :deep(.van-tab__text) {
      font-size: 13.18px;
    }
  }

  .content-list {
    height: 1000px;
    overflow-y: scroll;
    position: relative;
    margin-top: 125px;
    .abnormalInfo {
      position: fixed;
      width: 80px;
      height: 80px;
      transition: right 0.2s ease-in;
      background: url('/src/assets/keyIndicator/abnormalInfo.png') no-repeat;
      background-size: 100% 100%;
      right: -40px;
      bottom: 85px;
      z-index: 99;
    }
    .videoMeet{
      position: fixed;
      width: 80px;
      height: 80px;
      transition: right 0.2s ease-in;
      background: url('/src/assets/keyIndicator/icon-videomeet.png') no-repeat;
      background-size: 100% 100%;
      right: -40px;
      bottom: 15px;
      z-index: 99;
    }
  }
}
</style>
